JavaScript interactive examples are keyboard traps

[stevegoldberg]

I was tabbing through a page on MDN, and I found that once I tabbed into one of the "Try It" code blocks, I could not tab out. Hitting tab indents the code in the code block, and shift+tab removes the indent.

Naturally, this is bad for accessibility as it means that keyboard users cannot continue to use the page.

I would recommend removing the ability to indent code with tab and reserving tab for changing focus. See WCAG for more details.

[pransh15]

Hi @stevegoldberg 👋
Thanks for bringing this to light, I understand your concern. I will share it with the team and see what we can do here, and when. I'll keep you updated.

[stevegoldberg]

Cheers, thanks.

[bsmth]

Hi there 👋🏻 - it might be worth tracking this in a yari issue as it's more likely to be triaged as a bug / feature request there.

I've opened this one to track it -> mdn/yari#12712

If you're happy with that, we can close the Discussion here so the problem / solution is easier to follow. Does that sound okay?

Thank you :)

[stevegoldberg]

If that's a better place to track the problem, then sure! I don't have a strong opinion either way, I would just like to see it get resolved :)

[bsmth]

Agreed. OK let's close for now and track progress in the issue. Thanks for raising it.